<template>
	<view class="container">
		<view class="regtxt">新账号注册</view>
		<view class="input-box">
			<input type="text" placeholder="请输入手机号码" maxlength="11" v-model="form.phonenumber" class="input-style" />
			<view class="code-box">
				<input type="text" placeholder="请输入验证码" maxlength="4" v-model="form.smscode" class="input-code" />
				<text class="codetxt" @click="getCode">{{codeMsg}}</text>
				
			</view>
		</view>
		<view class="next" @click="toTwo">下一步</view>
		<view class="answer">收不到验证码？</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					phonenumber:"",
					smscode:''
				},
				timer:null,
				codeMsg:'获取验证码',
				countdown: 60,// 倒计时时间
			}
		},
		onShow() {
			if(uni.getStorageSync('regForm').phonenumber) {
				this.form = uni.getStorageSync('regForm')
				console.log(this.form)
			}
		},
		methods:{
			toTwo() {
				if(this.form.phonenumber && this.form.smscode) {
					uni.setStorageSync('regForm',this.form)
					this.$utils.navto('./registerTwo')
					console.log(uni.getStorageSync('regForm'))
				}
			},
			getCode() {
				if (!this.$utils.valiate.isPhoneNum(this.form.phonenumber)) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				this.timerInterval()
			},
			timerInterval() {
				if (!this.timer) {
					this.getCodePost()
					console.log('请求')
					this.timer = setInterval(() => {
						if (this.countdown > 0 && this.countdown <= 60) {
							this.countdown--;
							if (this.countdown !== 0) {
								this.codeMsg = "重新发送(" + this.countdown + ")";
							} else {
								clearInterval(this.timer);
								this.codeMsg = "获取验证码";
								this.countdown = 60;
								this.timer = null;
							}
						}	
					}, 1000)
				}
			},
			getCodePost() {
				this.$utils.http.post('/sms/sendPhoneMsg?phoneNumber=' + this.form.phonenumber, {})
					.then(res => {
						if (res.code === 200) {
							console.log("验证码获取成功!");
						} else {
							console.log("验证码获取失败!");
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '验证码获取失败！'
							});
						}
					})
					.catch(err => {
						console.log("验证码获取失败!");
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '验证码获取失败！'
						});
					})
			},
		}
	}
</script>

<style scoped>
.container {
	width: 92%;
	margin: 30upx auto;
	box-sizing: border-box;
}
.regtxt {
	font-size: 60upx;
	font-weight: bold;
	text-align: left;
	margin-bottom: 100upx;
	margin-top: 40upx;
}
.input-box {
	width: 100%;
	box-sizing: border-box;
}
.input-style {
	width: 100%;
	border-bottom: 1px solid #EAEAEA;
	padding: 20upx 0upx;
}
.code-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 28upx;
	border-bottom: 1px solid #EAEAEA;
	padding: 20upx 0upx;
}
.next {
	width: 100%;
	text-align: center;
	padding: 20upx 0upx;
	color: #FFFFFF;
	background-color: #345AD4;
	font-size: 28upx;
	margin: 20upx 0upx;
	border-radius: 10upx;
}
.answer {
	width: 100%;
	color: #909090;
	font-size: 24upx;
	text-align: right;
}
.codetxt {
	color: #345AD4;
}
</style>
